<template>
    <div class="icons-wrap">
      <swiper :options="swiperOption">
        <swiper-slide v-for="(page,index) of pagesList" :key="index">
          <div class="icon-item" v-for="item of page" :key="item.id">
            <div class="icon-item-div">
              <img class="icon-item-img" :src="item.iconUrl"/>
            </div>
            <p class="icon-item-desc">{{item.desc}}</p>
          </div>
        </swiper-slide>

      </swiper>
    </div>
</template>

<script>
export default {
  props: {
    list: Array
  },
  data () {
    return {
      swiperOption: {
        autoplay: false
      }
    }
  },
  methods: {},
  components: {},
  computed: {
    pagesList () {
      const pages = []
      this._.forEach(this.list, function (item, index) {
        let page = Math.floor(index / 8)
        if (!pages[page]) {
          pages[page] = []
        }
        pages[page].push(item)
      })
      return pages
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import "~styles/varibles.styl"
  @import "~styles/mixins.styl"
.icons-wrap >>> .swiper-container
  width :100%
  height :0
  padding-bottom :50%
.icons-wrap
  width :100%
  height :0
  padding-bottom :50%
  .icon-item
    width :25%
    height :0
    padding-bottom :25%
    position :relative
    float :left
    .icon-item-div
      position: absolute
      top: 0
      left:0
      right :0
      bottom :0.44rem
      width :100%
      box-sizing :border-box
      padding :0.1rem
      .icon-item-img
        height :100%
        margin :0 auto
        display :block
    .icon-item-desc
      position:absolute
      left :0
      right :0
      bottom :0
      height :0.44rem
      line-height 0.44rem
      text-align :center
      color:$darkTextColor
      ellipse()

</style>
